<template>
  <div class="system-theme">
    <!-- 主题选择 -->
    <div class="setting-section">
      <div class="section-title">主题风格</div>
      <div class="section-content">
        <div class="theme-grid">
          <div 
            v-for="theme in themeOptions" 
            :key="theme.id"
            class="theme-card"
            :class="{ 'active': settings.theme === theme.id }"
            @click="selectTheme(theme.id)"
          >
            <div class="theme-preview" :style="{ background: theme.preview }">
              <i :class="theme.icon" class="theme-icon"></i>
            </div>
            <div class="theme-info">
              <div class="theme-name">{{ theme.name }}</div>
              <div class="theme-desc">{{ theme.description }}</div>
            </div>
            <div v-if="settings.theme === theme.id" class="theme-check">
              <i class="el-icon-check"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 字体大小 -->
    <div class="setting-section">
      <div class="section-title">字体大小</div>
      <div class="section-content">
        <div class="font-size-options">
          <div 
            v-for="font in fontSizeOptions" 
            :key="font.value"
            class="font-option"
            :class="{ 'active': settings.fontSize === font.value }"
            @click="selectFontSize(font.value)"
          >
            <div class="font-label" :style="{ fontSize: font.size }">A</div>
            <div class="font-text">
              <div class="font-name">{{ font.label }}</div>
              <div class="font-desc">{{ font.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 动画效果 -->
    <div class="setting-section">
      <div class="section-title">动画效果</div>
      <div class="section-content">
        <div class="animation-options">
          <div 
            v-for="anim in animationOptions" 
            :key="anim.value"
            class="animation-item"
            @click="selectAnimation(anim.value)"
          >
            <div class="animation-info">
              <div class="animation-name">{{ anim.label }}</div>
              <div class="animation-desc">{{ anim.description }}</div>
            </div>
            <el-radio 
              :value="settings.animation === anim.value"
              @click.native.prevent
            ></el-radio>
          </div>
        </div>
      </div>
    </div>

    <!-- 自动暗黑模式 -->
    <div class="setting-section">
      <div class="section-title">自动切换</div>
      <div class="section-content">
        <div class="auto-switch-item">
          <div class="switch-info">
            <i class="el-icon-time switch-icon"></i>
            <div class="switch-text">
              <div class="switch-name">定时暗黑模式</div>
              <div class="switch-desc">在设定时间自动切换为暗黑模式</div>
            </div>
          </div>
          <el-switch
            v-model="settings.autoNightMode"
            @change="handleAutoNightModeChange"
          ></el-switch>
        </div>
        
        <div v-if="settings.autoNightMode" class="time-range-settings">
          <div class="time-range-item">
            <div class="time-label">开始时间</div>
            <el-time-picker
              v-model="settings.nightModeTime.start"
              placeholder="选择时间"
              format="HH:mm"
              value-format="HH:mm"
            ></el-time-picker>
          </div>
          <div class="time-range-item">
            <div class="time-label">结束时间</div>
            <el-time-picker
              v-model="settings.nightModeTime.end"
              placeholder="选择时间"
              format="HH:mm"
              value-format="HH:mm"
            ></el-time-picker>
          </div>
          <div class="time-tip">
            <i class="el-icon-info"></i>
            <span>在{{ settings.nightModeTime.start }}至{{ settings.nightModeTime.end }}期间自动启用暗黑模式</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 跟随系统 -->
    <div class="setting-section">
      <div class="section-title">系统同步</div>
      <div class="section-content">
        <div class="system-sync-item">
          <div class="sync-info">
            <i class="el-icon-setting sync-icon"></i>
            <div class="sync-text">
              <div class="sync-name">跟随系统主题</div>
              <div class="sync-desc">自动使用设备系统的主题设置</div>
            </div>
          </div>
          <el-switch
            v-model="settings.followSystem"
            @change="handleFollowSystemChange"
          ></el-switch>
        </div>

        <div class="system-sync-item">
          <div class="sync-info">
            <i class="el-icon-video-pause sync-icon"></i>
            <div class="sync-text">
              <div class="sync-name">减少动画效果</div>
              <div class="sync-desc">遵循系统辅助功能设置，减少动画</div>
            </div>
          </div>
          <el-switch
            v-model="settings.reducedMotion"
          ></el-switch>
        </div>
      </div>
    </div>

    <!-- 主题预览 -->
    <div class="setting-section">
      <div class="section-title">主题预览</div>
      <div class="section-content">
        <div class="preview-container">
          <div class="preview-card" :style="getPreviewStyle()">
            <div class="preview-header">
              <div class="preview-title">应急值守系统</div>
              <i class="el-icon-more"></i>
            </div>
            <div class="preview-content">
              <div class="preview-item">
                <i class="el-icon-warning"></i>
                <div class="preview-text">
                  <div class="preview-text-title">紧急预警通知</div>
                  <div class="preview-text-desc">这是主题预览示例内容</div>
                </div>
              </div>
              <div class="preview-button">查看详情</div>
            </div>
          </div>
          <div class="preview-tip">
            实时预览当前主题效果
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button 
        size="large"
        @click="handleReset"
      >
        恢复默认
      </el-button>
      <el-button 
        type="primary" 
        size="large"
        @click="handleSave"
      >
        应用主题
      </el-button>
    </div>

    <!-- 恢复默认确认对话框 -->
    <el-dialog
      title="恢复默认主题"
      :visible.sync="showResetDialog"
      width="80%"
      center
      :close-on-click-modal="false"
    >
      <div class="reset-confirm-content">
        <i class="el-icon-warning reset-icon"></i>
        <p class="reset-message">确定要恢复默认主题设置吗？</p>
        <p class="reset-tip">当前的所有自定义主题设置将会丢失</p>
      </div>
      <div slot="footer" class="dialog-footer-mobile">
        <el-button @click="cancelReset" size="medium">取消</el-button>
        <el-button type="primary" @click="confirmReset" size="medium">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  themeOptions,
  fontSizeOptions,
  animationOptions,
  getThemeSettings, 
  updateThemeSettings,
  getDefaultThemeSettings,
  applyTheme,
  applyFontSize,
  applyAnimation
} from './service';

export default {
  name: 'SystemTheme',

  data() {
    return {
      settings: {
        theme: 'default',
        fontSize: 'normal',
        animation: 'normal',
        autoNightMode: false,
        nightModeTime: {
          start: '20:00',
          end: '07:00'
        },
        followSystem: false,
        reducedMotion: false
      },
      themeOptions,
      fontSizeOptions,
      animationOptions,
      originalSettings: null,
      showResetDialog: false
    };
  },

  methods: {
    // 移动端Toast提示
    showToast(message, type = 'success') {
      this.$notify({
        title: '',
        message: message,
        type: type,
        duration: 2000,
        position: 'top-right',
        offset: 60,
        customClass: 'mobile-toast'
      });
    },

    // 选择主题
    selectTheme(themeId) {
      this.settings.theme = themeId;
      // 实时预览
      applyTheme(themeId);
      this.showToast(`已切换至${this.getThemeName(themeId)}`);
    },

    // 获取主题名称
    getThemeName(themeId) {
      const theme = this.themeOptions.find(t => t.id === themeId);
      return theme ? theme.name : '';
    },

    // 选择字体大小
    selectFontSize(fontSize) {
      this.settings.fontSize = fontSize;
      applyFontSize(fontSize);
      const option = this.fontSizeOptions.find(f => f.value === fontSize);
      this.showToast(`字体大小已设置为${option.label}`);
    },

    // 选择动画效果
    selectAnimation(animation) {
      this.settings.animation = animation;
      applyAnimation(animation);
      const option = this.animationOptions.find(a => a.value === animation);
      this.showToast(`动画效果已设置为${option.label}`);
    },

    // 自动暗黑模式变化
    handleAutoNightModeChange(enabled) {
      if (enabled) {
        this.showToast('定时暗黑模式已开启', 'info');
      } else {
        this.showToast('定时暗黑模式已关闭', 'info');
      }
    },

    // 跟随系统变化
    handleFollowSystemChange(enabled) {
      if (enabled) {
        this.showToast('已开启跟随系统主题', 'info');
        // 检测系统主题
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
          this.settings.theme = 'dark';
          applyTheme('dark');
        }
      } else {
        this.showToast('已关闭跟随系统主题', 'info');
      }
    },

    // 获取预览样式
    getPreviewStyle() {
      const theme = this.themeOptions.find(t => t.id === this.settings.theme);
      if (!theme) return {};

      return {
        backgroundColor: theme.backgroundColor,
        color: theme.textColor,
        borderColor: theme.primaryColor
      };
    },

    // 保存设置
    handleSave() {
      const loading = this.$loading({
        lock: true,
        text: '保存中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      updateThemeSettings(this.settings).then(() => {
        loading.close();
        
        // 应用所有设置
        applyTheme(this.settings.theme);
        applyFontSize(this.settings.fontSize);
        applyAnimation(this.settings.animation);
        
        // 获取主题名称
        const themeName = this.getThemeName(this.settings.theme);
        
        // 显示成功提示
        this.$notify({
          title: '✨ 主题设置已保存',
          message: `当前主题：${themeName}`,
          type: 'success',
          duration: 3000,
          position: 'top-right',
          offset: 60,
          customClass: 'mobile-toast-large'
        });
        
        this.originalSettings = JSON.parse(JSON.stringify(this.settings));
      }).catch(error => {
        loading.close();
        this.showToast(error.message || '保存失败，请稍后重试', 'error');
      });
    },

    // 恢复默认设置
    handleReset() {
      this.showResetDialog = true;
    },

    // 确认恢复默认
    confirmReset() {
      this.showResetDialog = false;
      const defaultSettings = getDefaultThemeSettings();
      this.settings = JSON.parse(JSON.stringify(defaultSettings));
      
      // 应用默认主题
      applyTheme(defaultSettings.theme);
      applyFontSize(defaultSettings.fontSize);
      applyAnimation(defaultSettings.animation);
      
      this.showToast('已恢复默认主题设置');
    },

    // 取消恢复默认
    cancelReset() {
      this.showResetDialog = false;
    },

    // 加载主题设置
    loadSettings() {
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      getThemeSettings().then(data => {
        this.settings = data;
        this.originalSettings = JSON.parse(JSON.stringify(data));
        
        // 应用已保存的设置
        applyTheme(data.theme);
        applyFontSize(data.fontSize);
        applyAnimation(data.animation);
        
        loading.close();
      }).catch(error => {
        loading.close();
        this.showToast(error.message || '加载失败', 'error');
      });
    }
  },

  mounted() {
    this.loadSettings();
  },

  beforeDestroy() {
    // 组件销毁时，如果没有保存，恢复原始设置
    if (this.originalSettings) {
      applyTheme(this.originalSettings.theme);
      applyFontSize(this.originalSettings.fontSize);
      applyAnimation(this.originalSettings.animation);
    }
  }
};
</script>

<style scoped>
.system-theme {
  background: var(--theme-bg-secondary);
  color: var(--theme-text);
  min-height: 100%;
  padding-bottom: 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: background var(--animation-duration), color var(--animation-duration);
}

/* 设置区块 */
.setting-section {
  background: var(--theme-bg);
  margin-bottom: 10px;
  box-shadow: 0 1px 2px var(--theme-shadow);
  transition: background var(--animation-duration), box-shadow var(--animation-duration);
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--theme-text);
  padding: 15px;
  border-left: 3px solid var(--theme-primary);
  padding-left: 12px;
  background: var(--theme-bg-secondary);
  transition: all var(--animation-duration);
}

.section-content {
  padding: 10px 15px 15px;
}

/* 主题选择 */
.theme-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.theme-card {
  position: relative;
  border: 2px solid var(--theme-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--animation-duration);
  background: var(--theme-bg);
}

.theme-card.active {
  border-color: var(--theme-primary);
  box-shadow: 0 2px 12px var(--theme-shadow);
}

.theme-card:active {
  transform: scale(0.98);
}

.theme-preview {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.theme-icon {
  font-size: 32px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.theme-info {
  padding: 12px 15px;
  background: var(--theme-bg);
  transition: background var(--animation-duration);
}

.theme-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--theme-text);
  margin-bottom: 4px;
  transition: color var(--animation-duration);
}

.theme-desc {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
}

.theme-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: var(--theme-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  box-shadow: 0 2px 8px var(--theme-shadow);
  transition: background var(--animation-duration);
}

/* 字体大小 */
.font-size-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.font-option {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
}

.font-option.active {
  border-color: #409EFF;
  background: #f0f9ff;
}

.font-option:active {
  transform: scale(0.98);
}

.font-label {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
  font-weight: bold;
  color: #409EFF;
  margin-right: 15px;
}

.font-text {
  flex: 1;
}

.font-name {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.font-desc {
  font-size: 12px;
  color: #999;
}

/* 动画效果 */
.animation-options {
  display: flex;
  flex-direction: column;
}

.animation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background 0.3s;
}

.animation-item:last-child {
  border-bottom: none;
}

.animation-item:active {
  background: #f8f8f8;
}

.animation-info {
  flex: 1;
}

.animation-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.animation-desc {
  font-size: 12px;
  color: #999;
}

/* 自动切换 */
.auto-switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.switch-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.switch-icon,
.sync-icon {
  font-size: 24px;
  color: #409EFF;
  margin-right: 12px;
}

.switch-text,
.sync-text {
  flex: 1;
}

.switch-name,
.sync-name {
  font-size: 15px;
  color: #333;
  margin-bottom: 4px;
}

.switch-desc,
.sync-desc {
  font-size: 12px;
  color: #999;
}

.time-range-settings {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f5f5f5;
}

.time-range-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.time-label {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}

.time-range-item >>> .el-date-editor {
  width: 180px;
}

.time-tip {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #f0f9ff;
  border-radius: 4px;
  margin-top: 5px;
}

.time-tip i {
  color: #409EFF;
  margin-right: 8px;
  font-size: 16px;
}

.time-tip span {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

/* 系统同步 */
.system-sync-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
}

.system-sync-item:last-child {
  border-bottom: none;
}

.sync-info {
  display: flex;
  align-items: center;
  flex: 1;
}

/* 主题预览 */
.preview-container {
  padding: 10px 0;
}

.preview-card {
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 10px;
  transition: all 0.3s;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.preview-title {
  font-size: 16px;
  font-weight: 600;
}

.preview-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preview-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: rgba(64, 158, 255, 0.05);
  border-radius: 8px;
}

.preview-item i {
  font-size: 24px;
  color: #409EFF;
  margin-right: 12px;
}

.preview-text {
  flex: 1;
}

.preview-text-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.preview-text-desc {
  font-size: 12px;
  opacity: 0.7;
}

.preview-button {
  padding: 10px 20px;
  background: #409EFF;
  color: white;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
}

.preview-tip {
  text-align: center;
  font-size: 13px;
  color: #999;
}

/* 操作按钮 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--theme-bg);
  padding: 15px;
  box-shadow: 0 -2px 8px var(--theme-shadow);
  display: flex;
  gap: 10px;
  z-index: 100;
  border-top: 1px solid var(--theme-border);
  transition: all var(--animation-duration);
}

.action-buttons .el-button {
  flex: 1;
  border-radius: 6px;
  font-size: 15px;
  height: 46px;
  font-weight: 500;
}

/* 恢复默认确认对话框样式 */
.reset-confirm-content {
  text-align: center;
  padding: 20px 0;
}

.reset-icon {
  font-size: 50px;
  color: #E6A23C;
  margin-bottom: 15px;
}

.reset-message {
  font-size: 16px;
  color: #333;
  margin: 0 0 10px 0;
  line-height: 1.6;
}

.reset-tip {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.dialog-footer-mobile {
  display: flex;
  gap: 10px;
  padding: 0;
}

.dialog-footer-mobile .el-button {
  flex: 1;
  margin: 0;
  border-radius: 4px;
}

/* 对话框移动端优化 */
.system-theme >>> .el-dialog {
  border-radius: 12px;
}

.system-theme >>> .el-dialog__header {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.system-theme >>> .el-dialog__title {
  font-size: 16px;
  font-weight: 600;
}

.system-theme >>> .el-dialog__body {
  padding: 20px;
}

.system-theme >>> .el-dialog__footer {
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
}

/* 移动端Toast样式优化 */
.system-theme >>> .mobile-toast {
  min-width: 280px !important;
  max-width: 90vw !important;
  padding: 15px 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.system-theme >>> .mobile-toast .el-notification__title {
  display: none;
}

.system-theme >>> .mobile-toast .el-notification__content {
  margin: 0 !important;
  text-align: center;
  font-size: 15px !important;
  font-weight: 500;
}

.system-theme >>> .mobile-toast.el-notification--success {
  background: #f0f9ff !important;
  border-left: 4px solid #67c23a !important;
}

.system-theme >>> .mobile-toast.el-notification--info {
  background: #f4f4f5 !important;
  border-left: 4px solid #909399 !important;
}

.system-theme >>> .mobile-toast.el-notification--error {
  background: #fef0f0 !important;
  border-left: 4px solid #f56c6c !important;
}

.system-theme >>> .mobile-toast .el-notification__icon {
  font-size: 24px !important;
  margin-right: 10px;
}

/* 大号Toast样式（用于保存成功等重要提示） */
.system-theme >>> .mobile-toast-large {
  min-width: 300px !important;
  max-width: 90vw !important;
  padding: 20px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
}

.system-theme >>> .mobile-toast-large .el-notification__title {
  color: white !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.system-theme >>> .mobile-toast-large .el-notification__content {
  color: white !important;
  font-size: 14px !important;
  opacity: 0.95;
  margin: 0 !important;
}

.system-theme >>> .mobile-toast-large .el-notification__icon {
  color: white !important;
  font-size: 28px !important;
}

.system-theme >>> .mobile-toast-large .el-notification__closeBtn {
  color: white !important;
}
</style>

